<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>

<body>
    <!--  -->
    <div id="app">
        <mylogin book="free" pagesize=10>
            免费课程
        </mylogin>
        <mylogin book="boutique" pageNum=5>
            精品课程
        </mylogin>
        <mylogin book="discount">
            折扣课程
        </mylogin>
    </div>
    <!--  -->

    <!--  -->
    <template id="demo">
        <div class="box">




            <h1>
                <slot></slot>
            </h1>

            <ul>
                <li v-for="(item,index) in res" :key=index>

                    <img :src="item.bannerFileUrl" alt="">
                    <!-- 课程名称 -->
                    <div>{{item.courseTitle}}</div>
                    <!-- 课程数 -->
                    <span>共{{item.subSectionNum}}节课</span> |
                    <!-- 报名人数 -->
                    <span>{{item.participationsCount}}人报名</span>
                    <div v-if="item.isFree == 1" class="color1">免费</div>

                    <div v-else="item.isDiscount == 1" class="bottom">
                        <span class="color2">{{item.discountPrice}}</span>
                        &nbsp;&nbsp;&nbsp;
                        <s class="color3">{{item.coursePrice}}</s>
                        <div class="Discount">{{item.discountDesc}}</div>
                    </div>
                    <!-- <div></div> -->

                </li>
            </ul>

        </div>
    </template>
    <!--  -->

    <!--  -->
    <style>
        .box {
            width: 1200px;
            margin: 10px auto;

        }

        h1 {
            text-align: center;
        }

        ul {
            width: 1200px;
            list-style: none;
        }

        li {
            float: left;
            padding: 0 8px;
            width: 223px;
            text-overflow: ellipsis;
        }

        img {
            width: 223px;
            height: 122px;

        }

        .color1 {
            color: #00cf8c;
            font-size: 16px;
        }

        .color2 {
            color: #ff4500;
            font-size: 16px;
        }

        .color3 {
            color: #999;
            text-decoration: line-through;
            font-size: 12px;
        }

        .Discount {
            color: #fa8c16;
            background: #fff7e6;
            border-color: #ffd591;
            display: inline;
            margin-left: 67px;
            width: 60px;

        }

        .bottom {
            box-sizing: border-box;
        }
    </style>
    <!--  -->

    <!--  -->
    <script>
        Vue.component("mylogin", {
            template: "#demo",
            data() {
                return {
                    res: [],

                }
            },
            props: {
                book: {
                    type: [String, Number],
                    default: "free"
                },
                pagesize: {
                    type: [String, Number],
                    default: "5"
                }
            },
            created() {
                console.log(this.book);
                let parms = new URLSearchParams
                parms.append("type", this.book)
                parms.append("pageNum", 1)
                parms.append("pageSize", this.pagesize)
                axios.post("http://59.111.104.104:8086/weChat/applet/course/list/type", parms).then((res) => {
                    console.log(res);
                    this.res = res.data.rows
                })
            }

        })
        let vm = new Vue({
            el: "#app",

        })
    </script>
    <!--  -->
</body>

</html>